<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <el-button size="default" icon="paperclip" round>{{$t('module.selectFile')}}</el-button>
      <ellipsis :row="1" :content="$t(placeholder) + sizeTip" hoverTip class="el-upload__tip"/>
    </div>
    <div v-else-if="mode === 'PC' && !readonly" v-loading="loading">
      <el-upload :file-list="fileList" :action="uploadUrl" :limit="maxNumber" with-credentials :multiple="maxNumber > 1"
                 :data="uploadParams" :on-success="uploadSuccess" auto-upload :before-upload="beforeUpload"
                 :on-remove="handleRemove" :on-preview="download" :on-error="uploadFail" :accept="String(fileTypes)" :on-exceed="overLimit">
        <el-button size="default" icon="paperclip" round>{{$t('module.selectFile')}}</el-button>
        <template #tip>
          <ellipsis :row="1" :content="$t(placeholder) + sizeTip" hoverTip class="el-upload__tip"/>
        </template>
      </el-upload>
    </div>
    <div v-else-if="mode === 'MOBILE' && !readonly">
      <uploader v-model="fileList" :accept="String(fileTypes)" :multiple="maxNumber > 1" :max-count="maxNumber > 0 ? maxNumber : 99"
          deletable :before-delete="handleRemove" :upload-text="$t('module.selectFile')" :after-read="afterRead" :max-size="maxSize > 0 ?  maxSize * 1024 * 1024 : undefined"
          @oversize="onOversize" upload-icon="description">
      </uploader>
      <div style="color: #9b9595">{{ $t(placeholder) }} {{ sizeTip }}</div>
    </div>
    <div v-else class="file-preview">
      <div v-if="mode === 'PC'" class="file-preview-pc">
        <div v-for="file in _value" :key="file.id" class="flieList">
          <ellipsis class="file-item" type="primary" @click="download(file)" :content="file.name">
            <template #pre>
              <el-icon><document/></el-icon>
            </template>
            <template #aft>
              <el-tag size="small">{{ getSize(file.size) }}</el-tag>
            </template>
          </ellipsis>
            <span class="look" style="color:rgb(10, 104, 33);cursor: pointer"
                  @click="preview(file)" :content="file.name">{{$t('module.preview')}}</span>
        </div>
      </div>
      <div v-else>
        <el-row v-for="file in _value" :key="file.id">
          <el-col :span="20">
            <ellipsis style="display: inline-block" class="file-item" type="primary" @click="download(file)" :content="file.name">
              <template #pre>
                <el-icon><document/></el-icon>
              </template>
            </ellipsis>
          </el-col>
          <el-col :span="4">
            <el-tag size="small">{{ getSize(file.size) }}</el-tag>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import componentMinxins from '../ComponentMinxins'
import {Uploader, showSuccessToast, showFailToast, showLoadingToast} from 'vant'

export default {
  mixins: [componentMinxins],
  name: 'FileUpload',
  components: {Uploader},
  props: {
    placeholder: {
      type: String,
      default: 'webAuto.selectAttachment',
    },
    modelValue: {
      type: Array,
      default: () => {
        return []
      },
    },
    maxSize: {
      type: Number,
      default: 5,
    },
    maxNumber: {
      type: Number,
      default: 10,
    },
    fileTypes: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  computed: {
    sizeTip() {
      if (this.fileTypes.length > 0) {
        return ` | ${this.$t('webAuto.allowedUploaded')}[${String(this.fileTypes).replaceAll(
            ',',
            '、'
        )}]${this.$t('webAuto.OnlyFiles')}，${this.$t('webAuto.AndnotExceed')}${this.maxSize}MB`
      }
      return this.maxSize > 0 ? ` | ${this.$t('webAuto.notExceed')}${this.maxSize}MB` : ''
    }
  },
  data() {
    return {
      loading: false,
      disabled: false,
      reloadFileList: null,
      fileList: [],
      uploadUrl: `${this.BASE_URL}/wflow/res`,
      uploadParams: {isImg: false},
    }
  },
  mounted() {
    this.loadFileList()
    this.reloadFileList = this.$debounce(this.loadFileList, 800)
  },
  methods: {
    loadFileList() {
      this.fileList = (this._value || []).map(f => {
        return {
          name: f.name,
          url: this.$getRes(f.url),
          status: 'success',
          uid: new Date().getTime() + Math.floor(1000 + Math.random() * 9000),
          file: new File([], f.name, {})
        }
      })
    },
    beforeUpload(file) {
      if (Array.isArray(file)) {
        for (let i = 0; i < file.length; i++) {
          if (!this.validFile(file[i])) {
            return false
          }
        }
        return true
      } else {
        return this.validFile(file)
      }
    },
    validFile(file) {
      if (this.maxSize > 0 && file.size / 1024 / 1024 > this.maxSize) {
        this.$message.warning(`${this.$t('webAuto.FailedLarge')} ${this.maxSize}MB`)
      } else {
        this.loading = true
        return true
      }
      return false
    },
    getSize(size) {
      if (size > 1048576) {
        return (size / 1048576).toFixed(1) + 'MB'
      } else if (size > 1024) {
        return (size / 1024).toFixed(1) + 'KB'
      } else {
        return size + 'B'
      }
    },
    removeFile(fileId) {
      this.$axios.delete(`${this.BASE_URL}/wflow/res/${fileId}`).then((rsp) => {
        this.$message.success('移除文件成功')
      })
    },
    uploadSuccess(response, file, fileList) {
      this.loading = false
      this.$emit('update:modelValue', [response, ...(this._value || [])])
      this.$message.success(response.name + this.$t('webAuto.UploadSuccessful'))
    },
    uploadFail(err) {
      console.log(err)
      this.loading = false
      this.$message.error(this.$t('webAuto.UploadFailed') + err)
    },
    overLimit() {
      if (this.mode === 'PC') {
        this.$message.warning(this.$t('webAuto.AtMost') + this.maxNumber + this.$t('webAuto.AnAtachment'))
        this.loading = false
      } else {
        showFailToast(this.$t('webAuto.QuantityExceedsLimit'))
      }
    },
    afterRead(file) {
      if (Array.isArray(file)) {
        file.forEach((fl) => {
          this.uploadFile(fl)
        })
      } else {
        this.uploadFile(file)
      }
    },
    uploadFile(file) {
      //上传文件
      const formData = new FormData()
      formData.append('file', file.file)
      formData.append('isImg', false)
      showLoadingToast({message: this.$t('webAuto.Uploading'), forbidClick: true})
      this.$axios
          .post(this.uploadUrl, formData, {
            'Content-type': 'multipart/form-data',
          })
          .then(
              (res) => {
                if (res.status === 200) {
                  this._value.push(res.data)
                  this.$emit('update:modelValue', this._value)
                  showSuccessToast(this.$t('webAuto.UploadSuccessful'))
                }
              },
              (err) => {
                showFailToast(this.$t('webAuto.UploadFailed'))
                console.log(err)
              }
          )
    },
    onOversize(file) {
      showFailToast(this.$t('webAuto.fileTooLarge'))
    },
    handleRemove(file, fileList) {
      let i = this._value.findIndex((v) => v.name === file.name)
      if (i > -1) {
        //this.removeFile(this._value[i].id)
        this._value.splice(i, 1)
        this.$emit('update:modelValue', this._value)
        console.log('删除文件', file)
      }
    },
    handlePictureCardPreview(file) {
    },
    handleDownload(file) {
      console.log(file)
    },
    download(file) {
      // console.log(file.name)
      // window.open(`${this.$getRes(file.url)}?name=${file.name}`, '_blank')
        window.open(`${this.$getRes(file.url)}?name=${encodeURIComponent(file.name)}`, '_blank')
    },
    preview(file) {
        const url = file.url.startsWith('/') ? file.url.substring(1) : file.url;
        function base64Encode(str) {
            // 将字符串转换为 Uint8Array
            const bytes = new TextEncoder().encode(str);
            // 使用 btoa() 方法进行 Base64 编码
            return btoa(String.fromCharCode.apply(null, bytes));
        }

        let previewUrl = 'http://180.101.147.124:8012/onlinePreview?url=' + encodeURIComponent(base64Encode(
                `${this.$getRes(url)}?name=${file.name}`));
        window.open(previewUrl)
    },
  },
  modelValue: {
    handler() {
      this.reloadFileList()
    },
    deep: true
  },
  emits: ['update:modelValue'],
}
</script>

<style lang="less" scoped>
:deep(.el-upload-list__item) {
  transition: none;
}
.flieList{
  position: relative;
  display:  inline-block;
  margin-right: 20px;
  width: auto;
}
.file-item {
  color: @theme-primary;
  cursor: pointer;
  margin-right: 30px;
}
.look{
  display: inline-block;
  position: absolute;
  right: 0;
  top: 2px;
}
</style>
